<template>
  <div className='u-selectList'>
    <el-dialog
      title="归属"
      :visible.sync="dialogVisible"
      :before-close="close">
      <el-table ref='singleTable' class="table" :data="data" border @current-change='handleCurrentChange' 
         style='width: 100%' highlight-current-row>
         <el-table-column align='center' property='login_name' label='员工账号'></el-table-column>
         <el-table-column align='center' property='name' label='员工名称'></el-table-column>
         <el-table-column align='center' property='dept_name' label='所属部门'></el-table-column>
      </el-table>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='10'></pagination>
      </div>
      <div class='u-selectList-btn'>
        <el-button type='primary' :disabled="!currentRow && currentRow !== 0" @click='update'>确定</el-button>
        <el-button type='primary' @click='close'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'u-selectList',

  props: ['id'],

  data() {
    return {
      data: [],
      currentRow: '',
      dialogVisible: false
    }
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      return this.$api.firmGetStaffs({
        aPageNum,
        aPageSize,
        aFirmId: this.aFirmId
      })
    },

    getData(data) {
      this.data = data
    },

    handleCurrentChange(val) {
      this.currentRow = val
      console.log(val)
    },

    async update() {
      const { code } = await this.$api.crmUpdateIntents({
        aId: this.id,
        aSalesId: this.currentRow.staff_id
      })
      if (code === 0) {
        this.currentRow = ''
        this.__notify('成功', '修改归属员工')
        this.close()
        this.$emit('update')
      }
    },

    close() {
      this.dialogVisible = false
    },

    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.page.changePage()
      })
    }
  }
}
</script>

<style lang='less'>
.u-selectList {
  &-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
